<template>
  <div ref="rootRef" :class="['bc-card', $attrs.class, { [`bc-card-size-${size}`]: size }]" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  size: String,
});

const rootRef = ref(null);

defineExpose({ rootRef });
</script>

<style>
.bc-card {
  position: relative;
  background: var(--color-bg-component);
  border-radius: var(--size-border-radius, 6px);
  overflow: hidden;

  & + & {
    margin-top: var(--size-cell-gap, 16px);
  }

  &-size-small {
    .bc-card-header,
    .bc-card-body,
    .bc-card-footer {
      padding: var(--size-cell-gap-sm, 8px);
    }
  }

  &-size-middle {
    .bc-card-header,
    .bc-card-body,
    .bc-card-footer {
      padding: var(--size-cell-gap, 16px);
    }

    .bc-card-header .bc-card-title-tabs {
      .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar,
      .ant-tabs-top > div > .ant-tabs-nav .ant-tabs-ink-bar {
        bottom: -17px;
      }
    }
  }
}
</style>
